import styles from './index.module.css';
import {useEffect, useRef} from "react";
import { useAppStore} from "../../stores/app.js";

function Loading() {
    const imgRef = useRef(null);
    const wrapperRef = useRef(null);
    const titleRef = useRef(null);
    const store = useAppStore();

    useEffect(() => {
        requestIdleCallback(() => {
            // console.log(111)
            titleRef.current.classList.add("loading-title");
            imgRef.current.classList.add('loading1');
            imgRef.current.classList.add('loading1');

            setTimeout(() => {
                imgRef.current.classList.add('loading2');
                wrapperRef.current.classList.add('loading-hide');
                setTimeout(() => {
                    store.setLoading(false);
                }, 800);
            }, 1000);
        });
    }, [store]);

    return (
        <div className={styles.wrapper} ref={wrapperRef}>
            <div className={styles.logo}>
                <img className={styles.img} src="./leaf.svg" alt="" ref={imgRef} />
                <span className={styles.title} ref={titleRef}>Life of PI</span>
            </div>
        </div>
    )
}

export default Loading;